<!DOCTYPE html>

<html>
<style type="text/css">
	input,select{
		border-radius:3px;
		margin: 2px;
		border:1px solid #c8cccf;
		outline:0;
		
	}
	
</style>
<div id="stu">
	<form class="layui-form layui-form-pane" action="useradd" id="forms">
		<table>
			<tr>
				<td><label class="lab1">账号</label></td>
				<td><input type="text" name="username"  id="usertext" placeholder="输入账号" autocomplete="off" onchange="usernoandyes(value);"></td>
				<td><font class="" style="border: 0;" id="buttontext"></font></td>
			</tr>
			<tr>
				<td><label class="lab1">姓名</label></td>
				<td><input type="text" name="name"   placeholder="输入姓名" autocomplete="off"><br></td>
			</tr>
			<tr>
				<td><label  class="lab1">性别</label></td>
				<td><select id="demoselect" name="xb" style="display: inline;" >
				<option value="" style="display:none;"></option>
			    <option value="男">男</option>
			    <option value="女">女</option>
			</select></td>
			</tr>
			<tr>
				<td><label class="lab1">民族</label></td>
				<td><input type="text" name="mz"   placeholder="民族" autocomplete="off"></td>
			</tr>
			<tr>
				<td><label class="lab1">籍贯</label></td>
				<td><input type="text" name="jg"  placeholder="籍贯"
					autocomplete="off"></td>
			</tr>
			<tr>
				<td><label class="lab1">政治面貌</label></td>
				<td><select id="demoselect" name="zzmm" style="display: inline;">
						<option style="display:none;" value=""></option>
					    <option value="中共党员">中共党员</option>
					    <option value="中共预备党员">中共预备党员</option>
					    <option value="共青团员">共青团员</option>
					    <option value="群众">群众</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><label class="lab1">电话</label></td>
				<td><input type="text" name="number" placeholder="输入电话"
					autocomplete="off" onkeyup="value=value.replace(/[^\d]/g,'')"></td>
			</tr>
			<tr>
				<td><label class="lab1">家庭地址</label></td>
				<td><input type="text" name="jtdz"  placeholder="输入家庭地址"
					autocomplete="off" ></td>
			</tr>
			<tr>
				<td><label class="lab1">身份证</label></td>
				<td><input type="text" name="sfz" placeholder="输入身份证"
					autocomplete="off" ></td>
			</tr>
			<tr>
				<td ><label class="lab1">备注</label></td>
				<td><textarea name="remark" style="height:4em;" id="remake"></textarea></td>
			</tr>
		</table>
		<button class="layui-btn layui-btn-normal" style="margin-left: 50%;margin-top: 3px;" type="button" onclick="useradd()">增加</button>
	</form>
</div>

<script type="text/javascript">
	function usernoandyes(value){
		$.post('usernoandyes?username='+value, function(data){
			if(!data){
				$("#buttontext").html('<font class="layui-icon layui-icon-close-fill" style="color:#ff5722;"></font>用户名已存在');
				$("#usertext").val('');
			}else{
				$("#buttontext").html('<font class="layui-icon layui-icon-ok-circle" style="color:#5fb878;"></font>OK！');
			}
		});
	}
	function useradd(){
		var a1=$("input[name='username']").val();
		var a2=$("input[name='name']").val();
		var a3=$("input[name='jg']").val();
		var a4=$("input[name='jtdz']").val();
		var a5=$("input[name='mz']").val();
		var a6=$("#remake").val();
		var a7=$("input[name='sfz']").val();
		var a8=$("input[name='xb']").val();
		var a9=$("input[name='zzmm']").val();
		if(a1!=""&&a2!=""&&a3!=""&&a4!=""&&a5!=""&&a6!=""&&a7!=""&&a8!=""&&a9!=""){
			$.post('usernoandyes?username='+a1, function(data){
				if(!data){
					alert('账号重复，不予新增！');
				}else{
					$("#forms").submit();
				}
			});
		}else{
			alert('存在空值，不予新增！');
		}
	}
</script>